<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .f1 {
            width: 300px;
            height: 40px;
            background-color: green;
            color: white;
            padding-left: 30px;
            background-position: 50% 50%;
            font-family: \9ED1\4F53;
            background-image: url(image/bang.gif);
            background-repeat: no-repeat;
            background-size: 30px;
        }

        .f2 {
            padding-top: 1px;
            width: 300px;
            padding-left: 30px;
            background-color: rgb(217, 230, 192);
        }

        a:link {
            color: blue;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        ul {
            list-style-type: none;
        }

        li:nth-child(1) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no01.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(2) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no02.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(3) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no03.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(4) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no04.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(5) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no05.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(6) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no06.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(7) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no07.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(8) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no08.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(9) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no09.gif);
            background-repeat: no-repeat;
        }

        li:nth-child(10) {
            padding-left: 25px;
            height: 30px;
            background-image: url(image/book_no10.gif);
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div>
        <div class="f1">
            <h2>畅销书排行</h2>
        </div>
        <div class="f2">
            <ul>
                <li><a href="#">不抱怨的世界(畅...</a><br></li>
                <li><a href="#">遇见未知的自己...</a><br></li>
                <li><a href="#">活法(季羡林...</a><br></li>
                <li><a href="#">高效人士的七个习惯</a></li>
                <li><a href="#">被迫强大(北外女生香奈儿</a></li>
                <li><a href="#">遇见心想事成的自己(《遇...</a></li>
                <li><a href="#">我的成功可以复制</a></li>
                <li><a href="#">少走人走的路：心智成熟的...</a></li>
                <li><a href="#">活出全新的自己-唤醒...</a></li>
                <li><a href="#">世界上最伟大的推销员</a></li>
            </ul>
        </div>
    </div>
</body>

</html>